<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <title>登录</title>
</head>
<style>
    .form {
        width: 300px;
        height: 200px;
        margin: 100px auto;
        background-color: bisque;
        text-align:center;
        padding-top: 20px;
    }
    .form-group{
        margin-top:30px;
        margin-bottom: 20px;
    }

</style>
<script>
    $(function() {
        var baseUrl = "http://182.92.83.218:7788";
        $("#login").on("click",function(){
            // 点击登录获取表单中的值
            var username = $("#username").val();
            var password = $("#password").val();
            var data = {
                username:username,
                password:password
            }
            // 根据用户名密码获取token
            $.ajax({
                url:baseUrl+"/user/login",
                method:"post",
                data:JSON.stringify(data),
                // 在jquery封装的ajax中发给后台的默认是查询字符串
                contentType:"application/json",
                success:function(data) {
                    // 将token存储到本地
                    localStorage.setItem('token',data.data.token)
                    // 请求成功后跳转到首页
                    location.href = 'file:///E:/杰普课上内容练习/JQuery/作业/智慧校园/zhxy.html'
                    // location.href='https://182.92.83.218/homework/zhxy.html';
                }
            })
            // 阻止表单默认提交行为
            // return false
            event.preventDefault();   
        })
    })
</script>
<body>
    <!-- <form class="form_login">
        用户名：<input id="username" type="text" name="username"><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码：<input id="password" type="password" name="password"><br>
        <input id="login" type="submit" value="登录">
    </form> -->
    <form class="form">
        <div class="form-group">
          <label for="username">用户名：</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group">
          <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
          <input type="password" class="form-control" id="password">
        </div>
        &nbsp;&nbsp;&nbsp;
        <button type="submit" id="login">登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="cancel" >取消</button>

    </form>
</body>
</html>
